<template>
  <div id="home">
    <div class="top">
      <div class="concent">
        <span class="one">空间天气</span>
        <span class="two">模型转化</span>
        <span class="three">V1.0</span>
      </div>
      <div class="page_icon">
        <i class="el-icon-news"></i>
        <i class="el-icon-menu"></i>
        <i class="el-icon-document"></i>
      </div>
      <div class="page_login">
        <i class="el-icon-menu"></i>
        <span class="log">xxx登录</span>
      </div>
    </div>

    <div class="page_content">
      <div class="first_floor">
        <p class="num1" @click="imgHandle">日冕行星际理论</p>
        <p class="num2"  @click="imgHandle">行星际激波计算</p>
        <p class="num3"  @click="imgHandle">磁层顶模式</p>
        <p class="num4"  @click="imgHandle">磁暴强度经验</p>
        <p class="num5" @click="imgHandle">磁层状态模式</p>
        <p class="num6"  @click="imgHandle">开放磁通估算</p>
      </div>
      <div class="second_floor">
        <p class="num7"  @click="imgHandle">弓激波模式</p>
        <p class="num8"  @click="imgHandle">极尖区模式</p>
        <p class="num9"  @click="imgHandle">等离子体密度反演</p>
      </div>
      <div class="three_floor">
        <p class="num10"  @click="imgHandle">GIC 预测模式</p>
        <p class="num11"  @click="imgHandle">磁尾扭转模式</p>
      </div>
      <div class="four_floor">
        <p class="num12"  @click="imgHandle">中低纬电离层理论</p>
        <p class="num13"  @click="imgHandle">局地中高层大气预报</p>
        <p class="num14"  @click="imgHandle">临近空间大气环境数据同化预报</p>
      </div>
    </div>
    <div class="page_module">
      <el-button type="primary" round class="el-icon-caret-right" @click="enter()">模式运行</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    imgHandle() {
      this.$router.push({
        path: "/pro",
      });
    },
    enter() {
      this.$router.push({
        path: "/start",
      });
    },
  },
};
</script>

<style scoped lang="scss">
#home {
  // background-color:palegoldenrod;
  background: url("@/assets/image/page.jpg") no-repeat;
  width: 100%;
  height: 960px;
  overflow: hidden;
  background-size: 100% 100%;
  .top {
    width: 100%;
    height: 80px;
    background-color: #2c3449;
    .concent {
      float: left;
      margin-top: 26px;
      margin-left: 100px;
      font-size: 18px;
      font-weight: 600;
      .one {
        color: #ffffff;
        letter-spacing: 10px;
      }
      .two {
        color: #27aae1;
        letter-spacing: 10px;
      }
      .three {
        margin-left: 20px;
        color: #27aae1;
      }
    }
    .page_icon {
      float: right;
      width: 200px;
      height: 78px;
      margin-top: 23px;
      margin-right: 350px;
      font-size: 30px;
      font-weight: 600;
      color: #27aae1;
      display: flex;
      justify-content: space-between;
    }
    .page_login {
      float: right;
      margin-top: 23px;
      width: 200px;
      height: 78px;
      margin-right: -500px;
      font-size: 30px;
      font-weight: 600;
      color: #27aae1;
      display: flex;
      justify-content: space-between;
      .log {
        font-size: 20px;
        margin-right: 80px;
      }
    }
  }
  .page_content {
    p {
      width: 150px;
      height: 70px;
      border: 1px sandybrown solid;
      float: left;
      font-size: 18px;
      color: #ff7e45;
      text-align: center;
      line-height: 70px;
    }
    .first_floor {
      clear: both;
      margin-top: 150px;
      margin-left: 260px;
      .num2,
      .num3 {
        margin-left: 200px;
      }
      .num4,
      .num5,
      .num6 {
        margin-left: 10px;
        color: #4ab4ff;
        border: 1px lightblue solid;
      }
    }
    .second_floor {
      clear: both;
      margin-left: 964px;
      .num7 {
        margin-top: 10px;
      }
      .num8 {
        margin-left: 172px;
        margin-top: 10px;
        color: #4ab4ff;
        border: 1px lightblue solid;
      }
      .num9 {
        margin-left: 10px;
        margin-top: 10px;
        color: #4ab4ff;
        border: 1px lightblue solid;
      }
    }
    .three_floor {
      clear: both;
      margin-left: 68%;
      margin-top: 380px;
      .num10 {
        color: #4ab4ff;
        border: 1px lightblue solid;
      }
      .num11 {
        margin-left: 10px;
        color: #4ab4ff;
        border: 1px lightblue solid;
      }
    }
    .four_floor {
      clear: both;
      margin-left: 59%;
    }
    .num12 {
      margin-left: 10px;
      margin-top: 10px;
      color: #4ab4ff;
      border: 1px lightblue solid;
    }
    .num13,
    .num14 {
      margin-left: 10px;
      margin-top: 10px;
      color: #4ab4ff;
      border: 1px lightblue solid;
      line-height: 40px;
    }
  }
  .page_module {
    width: 200px;
    height: 50px;
    margin-left: 85px;
    margin-top: 7%;
  }
  ::v-deep .el-button {
    width: 200px;
    height: 50px;
    font-size: 20px;
    background: #2c3449;
    border: 1px solid #2c3449;
  }
}
</style>